<div
    class="absolute inset-0 min-w-0 text-center overflow-auto print:overflow-visible"
    cdkScrollable>

    <!-- Main -->
    <div class="inline-block p-6 sm:p-10 text-left print:p-0">

        <!-- Invoice -->
        <div class="w-240 p-16 rounded-2xl shadow bg-card print:w-auto print:rounded-none print:shadow-none print:bg-transparent">

            <div class="flex items-start justify-between">
                <div class="grid grid-cols-2 gap-x-4 gap-y-1">
                    <div class="text-4xl tracking-tight text-secondary">INVOICE</div>
                    <div class="text-4xl">#9-0004</div>
                    <div class="font-medium tracking-tight text-secondary">INVOICE DATE</div>
                    <div class="font-medium">Jul 19, 2022</div>
                    <div class="font-medium tracking-tight text-secondary">DUE DATE</div>
                    <div class="font-medium">Aug 19, 2022</div>
                    <div class="font-medium tracking-tight text-secondary">TOTAL DUE</div>
                    <div class="font-medium">$235,000.00</div>
                </div>
                <div class="grid auto-cols-max grid-flow-col gap-x-8 -mr-16 py-6 px-8 rounded-l-2xl bg-accent dark">
                    <div class="place-self-center w-24">
                        <img
                            class="w-24"
                            src="assets/images/logo/logo.png">
                    </div>
                    <div class="pl-10 border-l text-md">
                        <div class="font-medium">Fuse Inc.</div>
                        <div>2810 Country Club Road</div>
                        <div>Cranford, NJ 07016</div>
                        <div>+66 123 455 87</div>
                        <div>hello@fuseinc.com</div>
                        <div>www.fuseinc.com</div>
                    </div>
                </div>
            </div>

            <div class="text-md">
                <div class="text-xl font-medium">Brian Hughes</div>
                <div>9301 Wood Street Philadelphia, PA 19111</div>
                <div>hughes.brian@company.com</div>
                <div>+55 552 455 87</div>
            </div>

            <div class="grid grid-cols-12 gap-x-1 mt-12">
                <!-- Columns -->
                <div class="col-span-8 font-medium text-md text-secondary">SERVICE</div>
                <div class="font-medium text-md text-right text-secondary">RATE</div>
                <div class="font-medium text-md text-right text-secondary">QTY</div>
                <div class="col-span-2 font-medium text-md text-right text-secondary">TOTAL</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Prototype & Design</div>
                <div class="self-center text-right">$75.00</div>
                <div class="self-center text-right">240</div>
                <div class="col-span-2 self-center text-right">$18,000.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Development</div>
                <div class="self-center text-right">$60.50</div>
                <div class="self-center text-right">350</div>
                <div class="col-span-2 self-center text-right">$21,175.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Testing</div>
                <div class="self-center text-right">$25.00</div>
                <div class="self-center text-right">50</div>
                <div class="col-span-2 self-center text-right">$1,250.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Documentation & Training</div>
                <div class="self-center text-right">$26.50</div>
                <div class="self-center text-right">260</div>
                <div class="col-span-2 self-center text-right">$6,890.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Critical bug fixes for a year</div>
                <div class="self-center text-right">$25,000</div>
                <div class="self-center text-right">2</div>
                <div class="col-span-2 self-center text-right">$50,000.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Extended security updates for a year</div>
                <div class="self-center text-right">$15.000</div>
                <div class="self-center text-right">2</div>
                <div class="col-span-2 self-center text-right">$30,000.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-4 border-b"></div>

                <!-- Item -->
                <div class="col-span-8 text-lg font-medium">Extended updates for a year</div>
                <div class="self-center text-right">$50.000</div>
                <div class="self-center text-right">2</div>
                <div class="col-span-2 self-center text-right">$100,000.00</div>

                <!-- Spacer -->
                <div class="col-span-12 mt-16"></div>

                <!-- Subtotal -->
                <div class="col-span-10 self-center font-medium tracking-tight text-secondary">SUBTOTAL</div>
                <div class="col-span-2 text-right text-lg">$227,315.00</div>

                <!-- Divider -->
                <div class="col-span-12 my-3 border-b"></div>

                <!-- Tax -->
                <div class="col-span-10 self-center font-medium tracking-tight text-secondary">TAX</div>
                <div class="col-span-2 text-right text-lg">$11,365.75</div>

                <!-- Divider -->
                <div class="col-span-12 my-3 border-b"></div>

                <!-- Discount -->
                <div class="col-span-10 self-center font-medium tracking-tight text-secondary">DISCOUNT</div>
                <div class="col-span-2 text-right text-lg">$3,680.75</div>

                <!-- Divider -->
                <div class="col-span-12 my-3 border-b"></div>

                <!-- Total -->
                <div class="col-span-10 self-center text-2xl font-medium tracking-tight text-secondary">TOTAL</div>
                <div class="col-span-2 text-right text-2xl font-medium">$235,000.00</div>
            </div>

            <div class="mt-16">
                <div class="font-medium">Please pay within 15 days. Thank you for your business.</div>
                <div class="flex items-start mt-4">
                    <img
                        class="flex-0 w-10 mt-2"
                        src="assets/images/logo/logo.png">
                    <div class="ml-6 text-sm text-secondary">
                        In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque scelerisque lacus sed feugiat fermentum.
                        Cras aliquet facilisis pellentesque. Nunc hendrerit quam at leo commodo, a suscipit tellus dapibus. Etiam at felis volutpat est mollis lacinia.
                        Mauris placerat sem sit amet velit mollis, in porttitor ex finibus. Proin eu nibh id libero tincidunt lacinia et eget.
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
